<template>
  <div class="home">
    <h1 class="title">代码分析系统</h1>
    <p>提供专业的代码分析服务</p>
    <img
      src="https://img0.baidu.com/it/u=1908917008,3375417493&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718557200&t=c8bf2d2bddd49b3e4fcaa224c457f185"
      alt="标题">
  </div>
  <h3 class="title">用户注册</h3>
  <p>欢迎注册代码分析系统</p>
  <form class="w form" @submit="onSubmit">
    <div class="row">
      <div class="item">
        <label for="username">用户名</label>
        <input id="username" v-model="formData.username" placeholder="请输入用户名" />
      </div>
      <div class="item ml-24">
        <label for="email">邮箱</label>
        <div class="email">
          <input id="email" v-model="formData.email" placeholder="请输入邮箱" />
          <a-button @click="sendEmail">发送邮件</a-button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="item">
        <label for="password">密码</label>
        <input id="password" v-model="formData.password" type="password" placeholder="请输入密码" />
      </div>
      <div class="item ml-24">
        <label for="rePassword">确认密码</label>
        <input id="rePassword" v-model="formData.rePassword" type="password" placeholder="请输入确认密码" />
      </div>
    </div>

    <div class="row">
      <div class="item upload">
        <div>头像</div>
        <a-upload
            :max-count="1"
            class="upload_avatar"
            v-model:file-list="fileList"
            name="file"
            list-type="picture-card"
            :show-upload-list="false"
            action="/api/img"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
          <a-image
              @click.stop
              v-if="imageUrl"
              :width="100"
              :src="imageUrl"
          >
            <template #previewMask>
              <div style="display: flex;justify-content: space-around">
                <EyeOutlined style="font-size: 20px" />
                <DeleteOutlined style="font-size: 20px;margin-left: 10px;color: #fff" @click.stop="delImg"/>
              </div>
            </template>
          </a-image>
          <div v-else>
            <loading-outlined style="color: #fff" v-if="loading"></loading-outlined>
            <plus-outlined style="color: #fff" v-else></plus-outlined>
            <div class="ant-upload-text" style="color: #fff">上传</div>
          </div>
        </a-upload>
      </div>
      <div class="item ml-24">
        <label for="code">邮箱验证码</label>
        <input id="code" v-model="formData.code" placeholder="请输入邮箱验证码" />
      </div>
    </div>

    <cropper ref="cropperRef"/>
    <button type="submit" class="submit_btn">
      注册
    </button>
<!--    <div id="captcha-register"></div>-->
  </form>
  <SliderVerificationCode ref="SliderVerificationCodeRef" @success="onSuccess"/>

</template>

<script setup>
import {DeleteOutlined, EyeOutlined, LoadingOutlined, PlusOutlined} from "@ant-design/icons-vue";
import {reactive, ref} from "vue";
import {message} from "ant-design-vue";
import { enroll } from "@/api/user.js";
import { sendEmail as sendEmailApi } from '@/api/user.js'
import Cropper from "@/components/cropper.vue";
import SliderVerificationCode from "@/components/sliderVerificationCode.vue";
const SliderVerificationCodeRef = ref()
const fileList = ref([]);
const cropperRef = ref()
const imageUrl = ref('')
const orange = ref('')
const loading = ref(false)
const formData = reactive({
  username: '',
  password: '',
  email: '',
  rePassword: '',
  code: '',
  codeStr: '',
})
const onSubmit = e => {
  e.preventDefault()
  const { username, password, rePassword, email, code } = formData
  if (!username || !password || !rePassword || !email || !orange.value || !code) {
    return message.warning("请输入完整的表单信息哦")
  }
  if (password !== rePassword) {
    return message.warning("两次输入的密码不一致哦")
  }
  SliderVerificationCodeRef.value.openVerification()
}

const onSuccess = async () => {
  console.log(formData)
  const { message: resMessage, code } = await enroll({...formData})
  if (code === 200 && resMessage === '操作成功') {
    return message.success('注册成功')
  }
  return message.warning(resMessage)
}

const sendEmail = async () => {
  if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(formData.email)) {
    return message.warning("不合法的邮箱")
  }
  const { message: resMessage, code, data } =await sendEmailApi({email: formData.email})
  if (code === 200 && resMessage === '操作成功') {
    formData.codeStr = data.codeStr
    return message.success('发送成功')
  }
  return message.warning(resMessage)
}

const delImg = () => {
  imageUrl.value = ''
  fileList.value = []
  orange.value = ''
}

const beforeUpload = async (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("请上传图片哦");
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isLt2M) {
    message.error("图片不能超过5MB哦");
    return false
  }
  try {
    const data = await cropperRef.value.openUpload(URL.createObjectURL(file))
    return Promise.resolve(data)
  } catch (e) {
    message.error('用户取消上传')
    return false
  }
};

const handleChange = (info) => {
  console.log(info)
  if (info.file.status === "uploading") {
    loading.value = true;
    return;
  }
  if (info.file.status === "done") {
    orange.value = info.file.response.data.fileName
    imageUrl.value = import.meta.env.VITE_IMG_PATH + info.file.response.data.fileName
  }
  if (info.file.status === "error") {
    message.error("图片上传失败");
  }
  loading.value = false;
};
</script>

<style scoped lang="scss">
.email {
  display: flex;
  align-items: center;
  input {
    flex: 2;
  }
  button {
    margin-top: 10px;
    flex: 1;
    margin-left: 10px;
  }
}
.submit_btn {
  border: none;
}
.upload_avatar {
  width: auto;
  border: 2px dotted #fff;
  border-radius: 10px;
  :deep(.ant-upload-select-picture-card) {
    border: none!important;
    margin: 0!important;
  }
}

#captcha-register {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40vw;
}
.upload {
  display: flex;
  align-items: center;
  >div {
    color: #fff;
    margin-right: 20px;
  }
}
.home {
  color: #fff;
  text-align: center;

  .title {
    margin-top: 100px;
    text-align: center;
    font-size: 74.67px;
  }

  p {
    margin-top: 16px;
    font-size: 24px;
  }

  img {
    width: 1200px;
    height: 460px;
    border-radius: 32px;
    margin-top: 100px;
  }
}

.register {
  margin-top: 180px;
}

.ml-24 {
  margin-left: 24px;
}

.title {
  font-size: 64px;
  text-align: center;
  color: #fff;
}

p {
  margin-top: 30px;
  color: #fff;
  text-align: center;
}

.w {
  width: 952px;
}

.form {
  margin-top: 80px;

  .row {
    display: flex;
    justify-content: center;

    .item {
      flex: 1;
      margin-bottom: 24px;

      label {
        color: #fff;
      }

      input {
        width: 100%;
        height: 64px;
        border-radius: 32px;
        padding: 0 20px;
        outline: none;
        font-size: 21px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #fff;
        margin-top: 10px;

        &::placeholder {
          color: rgba(80, 80, 80, 1);
        }
      }
    }
  }
}

button {
  height: 70px;
  background: rgba(255, 215, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 35px;
  margin-top: 40px;
}</style>